<!DOCTYPE html>
<html lang="en">
<head>
    <title>增删改查表格与图表3维</title>
    <style>
        h1 { 
            text-align: center; 
        }
        table{
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th,td{
            border: 1px solid rgb(28, 172, 191);
            padding: 8px;
            text-align: center;
        }
        th { 
            background-color: #ad3083; 
        }
        #plotlyChart { 
            margin-top: 22px; 
            text-align: center; 
        }
    </style>
</head>
<body>
    <h1>学生信息表格</h1>
    <button onclick="addRow()">增加</button>
    <table id="table">
        <tr>
            <th>姓名</th> <th>年龄</th> <th>体重/kg</th> <th>操作</th>
        </tr>
    </table>
    <div id="plotlyChart"></div>   
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script>
        var tableData = [
            { name: '老吕', age: 22,weight:45 },
            { name: '老张', age: 45 ,weight:65},
            { name: '老王', age: 55 ,weight:75},
            { name: '老西', age: 25 ,weight:48}
        ];
        var table = document.getElementById('table');var plotlyChart = document.getElementById('plotlyChart');
        function renderTable() {
            table.innerHTML = `
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>体重/kg</th>
                    <th>操作</th>
                </tr>
            `;
            
            tableData.forEach((data, index) => {
                var row = table.insertRow();
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                
                cell1.innerHTML = data.name;
                cell2.innerHTML = data.age;
                cell3.innerHTML = data.weight;
                cell4.innerHTML = `
                    <button onclick="editRow(${index})">编辑</button>
                    <button onclick="deleteRow(${index})">删除</button>
                `;
            });

            updatePlotlyChart(); 
        }

        function addRow() {
            var name = prompt('请输入姓名');
            var age = prompt('请输入年龄');
            var weight = prompt('请输入体重');
            tableData.push({ name, age,weight });
            renderTable();
        }

        function editRow(index) {
            var newName = prompt('请输入新姓名');
            var newAge = prompt('请输入新年龄');
            var newWeight = prompt('请输入新体重');
            tableData[index] = { name: newName, age: newAge,weight:weight };
            renderTable();
        }

        function deleteRow(index) {
            tableData.splice(index, 1);
            renderTable();
        }

        function updatePlotlyChart() {
        var data = [{
            x: tableData.map((data) => data.name),
            y: tableData.map((data) => data.age),
            z: tableData.map((data) => data.weight),
            type: 'scatter3d',
            mode: 'markers',
            marker: {
                size: 12
            }
        }];
        
        var layout = {
            title: '表格数据的Plotly 3D图表',
            scene: {
                xaxis: { title: '姓名' },
                yaxis: { title: '年龄' },
                zaxis: { title: '体重' }
            }
        };
        
        Plotly.newPlot('plotlyChart', data, layout);
    }

    renderTable(); // Initial rendering
</script>
    </script>
</body>
</html>
